<template>
	<view class="container">
		<view class="header">
			<image class="banner" :src="$wanlshop.oss(pageData.headerImage)" mode="widthFix"></image>
		</view>

		<view class="content">
			<view class="section" v-for="(item, index) in productList" :key="index">
				<view class="section-title">{{ item.title }}</view>
				<view class="product" :class="item.goods_list.length > 1 ? 'grid-2' : ''">
					<view class="item" v-for="(item1, key) in item.goods_list" :key="key">
						<view v-if="item.goods_list.length > 1" class="img-bg product-image"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(item1.image) + ')' }">
						</view>
						<image v-else class="image" :src="$wanlshop.oss(item1.image)" mode="widthFix"></image>
						<view class="product_content">
							<view class="title">{{ item1.title }}</view>
							<view class="description">{{ item1.description }}</view>
							<view class="bottom" @tap="onGoods(item1.id)">
								<view class="price">￥<span>{{ item1.price }}</span></view>
								<view class="button">立即购买</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="section">
				<view class="section-title">爆款推荐</view>
				<view class="product" :class="hotSellingRecommendation.length > 1 ? 'grid-2' : ''">
					<view class="item" v-for="(item, index) in hotSellingRecommendation" :key="index">
						<view v-if="hotSellingRecommendation.length > 1" class="img-bg product-image"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.image) + ')' }">
						</view>
						<image v-else class="image" :src="$wanlshop.oss(item.image)" mode="widthFix"></image>
						<view class="product_content">
							<view class="title">{{ item.title }}</view>
							<view class="description">{{ item.description }}</view>
							<view class="bottom">
								<view class="price">￥<span>{{ item.price }}</span></view>
								<view class="button">立即购买</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->

			<!-- <view class="section">
				<view class="section-title">其他单品</view>
				<view class="product" :class="otherItems.length > 1 ? 'grid-2' : ''">
					<view class="item" v-for="(item, index) in otherItems" :key="index">
						<view v-if="otherItems.length > 1" class="img-bg product-image"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.image) + ')' }">
						</view>
						<image v-else class="image" :src="$wanlshop.oss(item.image)" mode="widthFix"></image>
						<view class="product_content">
							<view class="title">{{ item.title }}</view>
							<view class="description">{{ item.description }}</view>
							<view class="bottom">
								<view class="price">￥<span>{{ item.price }}</span></view>
								<view class="button">立即购买</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>

		<view class="footer">
			<image class="banner" :src="$wanlshop.oss(pageData.footerImage)" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';	
export default {
	computed: {
		...mapState(['common']),
		categoryData() {
			// 剔除 公益领养 分类
			return this.common.modulesData.categoryModules.filter(item => {
				return item.name != '公益领养';
			})
		},
	},
	// watch: {
	// 	// 更新分类数据
	// 	categoryData: {
	// 		handler(now, old) {
	// 			if (now.length) {
	// 				// 默认为你推荐第一个活动
	// 				this.params.filter.category_id = now[0].id;
	// 				this.activeData();
	// 			}
	// 		},
	// 		immediate: true,
	// 	}
	// },
	data() {
		return {
			currentTab: 0, //预设当前项的值
			params: {
				search: '',
				sort: 'weigh',
				order: 'asc',
				page: 1,
				filter: {},
				op: {}
			}, // 获取商品列表参数
			// 页面数据
			pageData: {
				headerImage: '',
				footerImage: ''
			},
			// 获取商品列表参数
			params: {
				search: '',
				sort: 'weigh',
				order: 'asc',
				page: 1,
				filter: {},
				op: {}
			},
			newArrivals: [],  // 新品推荐
			hotSellingRecommendation: [],  // 爆款推荐
			otherItems: [],  // 其他单品
			productList: []
		}
	},
	onShow() {
		//this.loadData(1,1)
		//this.loadData(1,2)
		if(this.common.modulesData.categoryModules) {
			this.params.filter.category_id = this.common.modulesData.categoryModules[0].id;
			this.activeData();
		}
	},
	methods: {
		//异步加载商品列表
		async activeData() {
			this.params.type = 'goods';
			this.params.op.category_id = 'in';
			this.$api.get({
				url: '/wanlshop/product/lists',
				data: this.params,
				success: res => {
					this.$api.post({
						loadingTip: '加载中',
						url: `/wanlshop/activity/detail`,
						data: {
							type: 'category',
							type_id: res.activity.category_id
						},
						success: result => {
							let productList = result?.categories
							this.pageData.headerImage = result?.header_img;
							this.pageData.footerImage = result?.footer_img;
							// 修改导航栏标题
							uni.setNavigationBarTitle({
								title: result?.title
							})
							
							if(productList && productList?.length) {
								// let newArrivalsProductList = productList.filter(item => item?.title == '新品推荐');
								// let hotSellingRecommendationProductList = productList.filter(item => item?.title == '爆款推荐');
								// let otherProductList = productList.filter(item => item?.title == '其它单品');
								
								// this.newArrivals = newArrivalsProductList[0]?.goods_list || [];
								// this.hotSellingRecommendation = hotSellingRecommendationProductList[0]?.goods_list || [];
								// this.otherItems = otherProductList[0]?.goods_list || [];
								this.productList = productList || [];
								
							} else {
								uni.showToast({
									icon: 'none',
									title: '未配置活动'
								})
								this.productList = [];
							}
						}
					})
				},
			});
		},
		loadData(id, page) {
			this.$api.post({
				loadingTip: '加载中',
				url: `/wanlshop/product/hotsale?page=${page}`,
				success: res => {
					console.log('GET_Popular', res)
					res.data.forEach(item => {
						if (item.row == "活动页-头部") {
							this.pageData.headerImage = item.img_url;
						}
						if (item.row == "活动页-底部") {
							this.pageData.footerImage = item.img_url;
						}
					})
				}
			})
		},
	}
}
</script>

<style lang="scss">
page {
	background-color: #ffb70010;
}

.container {

	image {
		width: 100%;
		display: block;
	}

	.header,
	.footer {
		width: 100%;

		.banner {
			width: 100%;
		}
	}

	.content {
		padding: 30rpx 40rpx;
		width: 100%;

		.section {
			width: 100%;
			margin-bottom: 30rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.section-title {
				margin: 0 auto 30rpx;
				width: fit-content;
				font-size: 42rpx;
				font-weight: bold;
				background: linear-gradient(to right, #f64d01, #ffb700);
				-webkit-background-clip: text;
				color: transparent;
				position: relative;

				@mixin title {
					content: '';
					position: absolute;
					width: 50rpx;
					height: 6rpx;
					top: 50%;
					transform: translateY(-50%);
				}

				&::before {
					@include title;
					left: -60rpx;
					background-color: #f64d01;
				}

				&::after {
					@include title;
					right: -60rpx;
					background-color: #ffb700;
				}
			}

			.product {
				width: 100%;

				.item {
					width: 100%;
					/* 解决nowrap宽度溢出问题 */
					min-width: 0;
					border-radius: 8rpx;
					overflow: hidden;
				}

				.product_content {
					width: 100%;
					padding: 26rpx;
					background-color: white;
					color: #3d3d3d;

					.title {
						width: 100%;
						font-size: 34rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}

					.description {
						width: 100%;
						font-size: 24rpx;
						margin-bottom: 30rpx;
					}

					.bottom {
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						flex-wrap: wrap;
						gap: 8rpx;

						.price {
							color: red;
							font-size: 32rpx;

							span {
								font-size: 46rpx;
							}
						}

						.button {
							font-size: 30rpx;
							color: white;
							background-color: red;
							border-radius: 6rpx;
							padding: 16rpx 40rpx;
							line-height: 1;
						}
					}
				}

				&.grid-2 {
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 24rpx;

					.product-image {
						width: 100%;
						padding-top: 100%;
						background-size: cover !important;
						background-position: center !important;
					}

					.product_content {
						width: 100%;

						.title {
							overflow: hidden;
							white-space: nowrap;
							font-size: 28rpx;
							margin-bottom: 8rpx;
						}

						.description {
							font-size: 22rpx;
							margin-bottom: 20rpx;
							overflow: hidden;
							white-space: nowrap;
						}

						.bottom {
							.price {
								font-size: 28rpx;
								width: 100%;

								span {
									font-size: 38rpx;
								}
							}

							.button {
								font-size: 20rpx;
								padding: 16rpx 40rpx;
							}
						}
					}
				}
			}
		}
	}

}
</style>
